<template>
  <div class="detail-wrap">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="200px">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="ruleForm.workNumber" disabled />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="ruleForm.mobile" :disabled="$route.params.id ? true : false" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentId" class="bumen-required">
        <SelectDepartment v-model="ruleForm.departmentId" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="ruleForm.formOfEmployment" placeholder="请选择聘用形式">
          <!-- label属性是页面上用户看到的文字， value是选择了文字以后，js里面的变量的值 -->
          <el-option label="正式" :value="1" />
          <el-option label="非正式" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker v-model="ruleForm.timeOfEntry" format="yyyy年MM月dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker v-model="ruleForm.correctionTime" format="yyyy年MM月dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="员工头像" prop="staffPhoto">
        <!-- <UploadImage :value="ruleForm.staffPhoto" @input="ruleForm.staffPhoto = $event" /> -->
        <UploadImage v-model="ruleForm.staffPhoto" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">{{ $route.params.id ? '更新' : '保存' }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SelectDepartment from './components/select-department.vue'
import { addEmployeeRequest, getEmployeeDetailRequest, updateEmployeeDetailRequest } from '@/api/employee'
import UploadImage from './components/upload-image.vue'

export default {
  components: { SelectDepartment, UploadImage },
  data() {
    const validator = (rules, value, callback) => {
      if (value === 0) {
        callback(new Error('请选择部门'))
        return
      }
      callback()
    }
    // 下面的校验函数是针对 转正时间必须大于入职时间。 自定义校验函数
    const validatorCorrectionTime = (rules, value, callback) => {
      console.log(this.ruleForm.timeOfEntry, value)
      // 两个时间的比较，是用时间戳
      // 获取时间戳的三种方式+new Date(xxx) ====  Date.now() ====  new Date(xxxx).getTime()
      if (new Date(this.ruleForm.timeOfEntry).getTime() > new Date(value).getTime()) {
        callback(new Error('转正时间必须大于入职时间'))
        return
      }

      callback()
    }
    return {
      ruleForm: {
        username: '',
        workNumber: '', // 新增的时候，工号不需要传
        mobile: '',
        departmentId: 0,
        formOfEmployment: '',
        timeOfEntry: '',
        correctionTime: '',
        staffPhoto: '' // 照片字段也可以不传
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 4, message: '用户名必须是1-4位', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3568]\d{9}$/, message: '请输入正常手机号的格式', trigger: 'blur' }
        ],
        departmentId: [
          // 面试的时候可以说的： 你就说我之前校验的时候，有一个级联选择器，默认的值传递是0，在校验规则的时候，默认的required
          // 认为数字0是有值的，校验不成功，所以我们就写了自定义校验，针对初始值0做一个错误判断，从而实现校验
          // { required: true, message: '请选择部门', trigger: 'change' }
          { validator, trigger: 'change' }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式必填', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '入职时间必填', trigger: 'change' }
        ],
        correctionTime: [
          { required: true, message: '转正时间必填', trigger: 'change' },
          { validator: validatorCorrectionTime, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      // this.$route.params 有值就是编辑或者查看，没有值就是新增
      console.log(this.$route.params)
      if (this.$route.params.id) {
        // 编辑 --- 发请求，将数据回填
        const res = await getEmployeeDetailRequest(this.$route.params.id)
        console.log(res)
        this.ruleForm = res.data
      } else {
        // 新增
      }
    },
    submitForm() {
      this.$refs.ruleFormRef.validate(async(value) => {
        if (value) {
          if (this.$route.params.id) {
            // 因为编辑的时候，获取用户详情，给this.ruleForm这个对象赋值了很多数据
            // 但是更新的接口有些字段不需要，需要手动删除一些字段
            delete this.ruleForm.departmentName
            delete this.ruleForm.roleIds
            await updateEmployeeDetailRequest(this.ruleForm)
          } else {
            // 进入了这个分支，标签校验成功，然后在发请求
            await addEmployeeRequest(this.ruleForm)
          }

          // this.$router.push('xxxx')
          // this.$router.go(-1)
          this.$router.back()
        }
      })
    }
  }
}
</script>

<style lang="scss">
// 一个文件里面可以写多个style标签。
// 如果有二次修改element-ui的原生组件的样式，如果加了scoped属性，有可能改动不会生效
// 可以采用样式穿透v-deep: 来实现，但是有些深层的样式也不好修改。所以在写一个style标签
// 不加scopepd样式，在里面专门去修改 element-ui组件的内部样式即可
.bumen-required .el-form-item__label::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
</style>

<style lang="scss" scoped>
.detail-wrap {
  width: 60%;
  padding-left: 100px;
  .el-select {
    width: 100%;
  }
}
</style>
